<template>
  <div class="container-fans">
      <el-card>
        <div slot="header" class="clearfix">
           <my-bread>粉丝管理</my-bread>
        </div>
        <!-- 标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="粉丝列表" name="list">
            <el-row :gutter="20">
              <div v-for="fan in fans" :key="fan.name">
                <el-col :span="4">
                  <div class="grid-content bg-purple">
                    <el-avatar :size="80" :src="fan.photo"></el-avatar>
                    <span class="nameClass">{{fan.name}}</span>
                    <el-tag>+  关注</el-tag>
                  </div>
                </el-col>
              </div>
            </el-row>
            <!-- 分页 -->
            <el-pagination
              background
              :page-size="30"
              layout="prev, pager, next"
              @current-change="hCurrentPage"
              :total="totalCount">
            </el-pagination>
          </el-tab-pane>
          <el-tab-pane label="粉丝画像" name="echarts">
            <p>粉丝画像</p>
            <!-- 准备dom容器，让echarts在这里画图
            注意：
              1. 要指定宽，高
              2. 设置ref，方便我们访问这个dom元素
            -->
            <div ref="main" style="width:600px; height:400px"></div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      activeName: 'list',
      fans: {
        id: '',
        name: '',
        photo: ''
      },
      currentPage: 1,
      totalCount: 0
    }
  },
  created () {
    this.loadfans()
  },
  methods: {
    // 获取粉丝列表内容
    async loadfans () {
      const result = await this.$http({
        method: 'get',
        url: '/mp/v1_0/followers',
        params: {
          page: this.currentPage,
          per_page: 30
        }
      })
      console.log('粉丝列表', result)
      this.fans = result.data.data.results
      this.totalCount = result.data.data.total_count
    },
    // 切换标签页
    handleClick (tab, event) {
      // console.log(tab, event)
      if (this.activeName === 'echarts') {
        this.draw()
      }
    },
    // 分页
    hCurrentPage (newPage) {
      this.currentPage = newPage
      this.loadfans()
    },
    // 获取echarts返回数据
    getFansData () {
      // 获取接口数据，并返回
      // 这个接口不太稳定。如果一时取不到数据，再多试几次
      return this.$http({
        method: 'get',
        url: '/mp/v1_0/statistics/followers'
      })
    },
    // 处理接收的对象 ，返回两个数组
    buildDataForEchart (obj) {
      // 接收一个对象，返回两个数组
      const xData = Object.keys(obj).map(item => {
        return item.replace('le', '小于').replace('gt', '大于')
      })
      const yData = Object.values(obj)
      return {
        xData,
        yData
      }
    },
    // 图表显示
    async draw () {
      // (1) 取回数据
      const result = await this.getFansData()
      // console.log(result)
      // （2）对数据进行加工--数据不能再echarts中使用
      const { xData, yData } = this.buildDataForEchart(result.data.data.age)
      // console.log('xData数据：', xData, yData)
      // 1.基于准备好的dom,初始化 echarts实例
      var myChart = echarts.init(this.$refs.main)
      // var myChart = echarts.init(document.getElementById('main'))
      // 2.指定图表的配置项和数据
      var option = {
        xAxis: {
          type: 'category',
          // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          data: xData
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          // data: [120, 200, 150, 80, 70, 110, 130],
          data: yData,
          // type: 'bar',
          type: 'line',
          name: '年龄分布',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(220, 220, 220, 0.8)'
          }
        }]
      }
      // 3.使用刚指定的配置项和数据显示图表
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    // background: #d3dce6;
    border: 1px solid #eee;
    width: 150px;
    height: 180px;
    position: relative;
    margin-bottom: 20px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .el-avatar {
    position: absolute;
    top: 10%;
    left: 25%;
  }
  .nameClass {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 60%;
  }
  .el-tag {
    position: absolute;
    bottom:0;
    left: 50%;
    transform: translate(-50%);
  }
</style>
